<template>
  <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="obj in imglist" :key="obj.bannerid" >
        <img :src="obj.img" @click="goUrl(obj.link)" />
    </van-swipe-item>
   <!-- <van-swipe-item v-for="(url, index) in imgs" :key="index"
      ><img :src="url" @click="goUrl(url)"
    /></van-swipe-item> -->
  </van-swipe>
</template>

<script>

import axios from "axios";
export default {
  name: "Banner",
  data() {
    return {
      imgs: [],
    };
  },
  created() {
    axios({
      url: "api/banner/list",
    }).then((res) => {
      if (res.data.code == 200) {  
        this.imgs = res.data.data
        // console.log('datares',res.data.data);
           
        //   res.data.data.forEach((i) => {
        //   this.imgs.push(i.img);
        //  })
      }
    });
  },
  
  computed:{  
    imglist:function(){
      return this.imgs.filter(item=>item.flag)
    }
  },

  methods: {
    goUrl(url){
      location.href=url;
    } 
  },
};
</script>
<style scoped>

 .van-swipe-item,img{
  width: 100%;
  height: 100%;
}
.my-swipe {
  /* width: 100%; */
  height: 9rem;
  margin: 0.3rem 0.5rem;
  border-radius: 0.4rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 8rem;
  text-align: center;
  background-color: #39a9ed;
}
</style>